<template>
	<hx-navbar title="收银台"></hx-navbar>
	<view v-if="!loading" class="pay-container">
		<view class="pay-amount text-price" style="color: red">
			{{ state.order.paymentPrice }}
		</view>
		<view class="pay-countdown"> 请在30分钟内付款，超时订单自动取消 </view>
		<u-cell-group :border="false">
			<u-cell-item icon="weixin-fill" :icon-style="{ color: '#19be6b' }" title="微信支付" :arrow="false">
				<template v-slot:right-icon>
					<u-radio-group v-model="paymentType">
						<u-radio name="1"></u-radio>
					</u-radio-group>
				</template>
			</u-cell-item>
			<u-cell-item icon="zhifubao" :icon-style="{ color: '#2979ff' }" title="支付宝支付" :arrow="false">
				<template v-slot:right-icon>
					<u-radio-group v-model="paymentType">
						<u-radio name="2"></u-radio>
					</u-radio-group>
				</template>
			</u-cell-item>
		</u-cell-group>
		<u-button shape="circle" style="margin: 30rpx 60rpx 30rpx 60rpx" type="primary" @click="onPrepay">立即支付</u-button>
	</view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import { prepay } from '@/utils/pay';
import { getById, orderPrepay } from '@/api/order/orderInfo';
const loading = ref(true);
const paymentType = ref('1');
const timestamp = ref(0);
const state = reactive<{ order: any }>({
	order: {},
});
onLoad((options) => {
	getOrder(options?.id);
});
const getOrder = (id: string) => {
	getById(id).then((response) => {
		loading.value = false;
		state.order = response.data;
	});
};
const onPrepay = () => {
	// 预支付
	let prepayParams = {};
	if (paymentType.value == '1') {
		//微信支付
		prepayParams = {
			id: state.order.id,
			paymentType: paymentType.value,
			// #ifdef MP
			tradeType: 'WX_JSAPI_PAY',
			// #endif
			// #ifdef H5
			tradeType: 'WX_H5_PAY',
			// #endif
			// #ifdef APP-PLUS
			tradeType: 'WX_APP_PAY',
			// #endif
		};
	} else {
		//支付宝支付
		prepayParams = {
			id: state.order.id,
			paymentType: paymentType.value,
			// #ifdef MP
			tradeType: 'ALI_JSAPI_PAY',
			// #endif
			// #ifdef H5
			tradeType: 'ALI_H5_PAY',
			returnUrl: 'https://mall.ihuanxing.cn/pages/order-pay/index?id' + state.order.id, // 同步跳转地址，仅支持http/https
			quitUrl: 'https://mall.ihuanxing.cn/pages/order-pay/index?id' + state.order.id, //用户付款中途退出返回商户网站的地址
			// #endif
			// #ifdef APP-PLUS
			tradeType: 'ALI_APP_PAY',
			// #endif
		};
	}
	orderPrepay(prepayParams).then((res) => {
		const data = res.data;
		prepay(data, state.order, '/pages/order/pay-result/index?id=' + state.order.id, paymentType.value);
	});
};
</script>

<style lang="scss">
.pay-container {
	background-color: #fff;
	padding: 20rpx;
}
.pay-amount {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 80rpx;
	padding-bottom: 20rpx;
	font-size: 26px;
}
.pay-countdown {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 80rpx;
	color: #909090;
	font-size: 14px;
}
.pay-foot {
	margin-top: 40rpx;
}
</style>
